<script setup>
import {snackbar} from "./store";
import {ref, onMounted , watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import axios from "axios";
import { message } from "ant-design-vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('en')

const drawer = ref(true)
const subAPPName = ref(null)
const isShowDrawer = ref(false)
const route = useRoute();
const isShowAppBar = ref(true)

watch(() => route.matched, async newMatched => {
        for (let matchedRoute of newMatched) {
            if (matchedRoute.path === '/login') {
                isShowAppBar.value = false
            }
            if (matchedRoute.path === '/backend') {
                isShowDrawer.value = true
                isShowAppBar.value = true
                subAPPName.value = '管理后台'
                return
            } else if (matchedRoute.path === '/mobile') {
                isShowDrawer.value = false
                isShowAppBar.value = true
                subAPPName.value = '移动端'
                return
            } else if (matchedRoute.path === '/cockpit'){
                isShowDrawer.value = false
                isShowAppBar.value = false
                subAPPName.value = '驾驶舱'
                return
            }
        }
    }
)

onMounted(() => {
    if(route.fullPath == '/login') {
        isShowAppBar.value = false
    }
})

const user = ref(JSON.parse(localStorage.getItem("ZAYY_USER_INFO")))

const router = useRouter();
function logout() {
    axios.post("/User/logout", {}).then(res => {
        if(res.data.code == 0) {
            localStorage.removeItem('token')
            localStorage.removeItem('ZAYY_USER_INFO')
            router.push('/login')                
        } else {
            message.error(res.data.message)
        }
    }, err => {
        message.error(err.data.message)
    })
}
function updateUser(val) {
    user.value = val
}

</script>

<template>
    <v-layout>
        <v-app-bar v-if="isShowAppBar" density="comfortable" color="background" elevation="0" class="app-bar" style="background-image: url(./assets/images/backend.png);">
            <template v-slot:default>
                <v-btn icon="mdi-menu" v-if="isShowDrawer" @click="drawer = !drawer"></v-btn>
                <div class="top-title">嘉兴药品返点系统</div>
            </template>

            <template v-slot:append>
                <v-menu>
                    <template v-slot:activator="{ props }">
                        <v-btn v-bind="props">
                            <span style="color: #fff;">{{ user ? user.username : '' }}</span>
                        </v-btn>
                        <v-btn icon="mdi-logout" color="#fff" @click="logout()"></v-btn>
                    </template>

                    <v-list>
                        <v-list-item v-on:click="logout()" title="登出"></v-list-item>
                    </v-list>
                </v-menu>
            </template>
        </v-app-bar>
        
        <a-config-provider :locale="zhCN">
            <router-view :drawer="drawer" @updateUser="updateUser"></router-view>
        </a-config-provider>

        <v-snackbar v-model="snackbar.display">{{ snackbar.message }}
            <template v-slot:actions>
                <v-btn :color="snackbar.color" variant="text" @click="snackbar.display = false">关闭</v-btn>
            </template>
        </v-snackbar>
    </v-layout>
</template>

<style scoped>
.top-title {
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    font-size: 29px;
    letter-spacing: 11px;
    font-weight: 500;
    line-height: 29px;
}
.app-bar :deep(.v-toolbar__content) {
    background-image: url(./assets/images/backend.png);
    background-size: 100% 100%;
}
:deep(:where(.css-dev-only-do-not-override-b92jn9).ant-btn-primary) {
    color: #fff !important;
}
:deep(:where(.css-dev-only-do-not-override-b92jn9).ant-modal .ant-modal-footer .ant-btn+.ant-btn:not(.ant-dropdown-trigger)) {
    color: #fff !important;
}
:deep(:where(.css-dev-only-do-not-override-b92jn9)[class^="ant-table"] [class^="ant-table"], :where(.css-dev-only-do-not-override-b92jn9)[class*=" ant-table"] [class^="ant-table"], :where(.css-dev-only-do-not-override-b92jn9)[class^="ant-table"] [class*=" ant-table"], :where(.css-dev-only-do-not-override-b92jn9)[class*=" ant-table"] [class*=" ant-table"]) {
    border-radius: 0px !important;
}
:deep(.v-main__scroller) {
    padding-left: 20px;
}
</style>
